import { Component } from "react";
import { View, Swiper, SwiperItem, Image } from "@tarojs/components";
import { navigateTo } from "@tarojs/taro";
import { AtList, AtListItem } from "taro-ui";
import { getArticle } from "@/api/article";
import "./index.less";

export default class Index extends Component {
  state = {
    swiperData: [],
    articleData: [],
    pageNum: 1,
  };

  componentWillMount() {}

  async componentDidMount() {
    const resHot = await getArticle({
      pageNum: 1,
      pageSize: 5,
      filters: { publish: 1 },
      orderBys: "visits desc",
    });

    const res = await getArticle({
      // pageNum: this.state.pageNum,
      // pageSize: 10,
      filters: { publish: 1 },
      orderBys: "topping desc,id desc",
    });
    this.setState({ articleData: res.data, swiperData: resHot.data });
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    const { swiperData, articleData } = this.state;
    return (
      <View className="index">
        {/* <Swiper
          className="swiper"
          indicatorColor="#999"
          indicatorActiveColor="#333"
          circular
          indicatorDots
          autoplay
        >
          {swiperData.map((item: any) => {
            return (
              <SwiperItem key={item.id}>
                <View className="Swiper-title">{item.title}</View>
                <Image
                  src={`https://cdn.hyl999.co/public/image/${item.picture}`}
                  className="Swiper-img"
                />
              </SwiperItem>
            );
          })}
        </Swiper> */}

        <AtList>
          {articleData.map(({ id, title, autograph, picture }) => {
            return (
              <AtListItem
                key={id}
                title={title}
                arrow="right"
                className="article-item"
                note={autograph}
                thumb={`https://cdn.hyl999.co/public/image/${picture}`}
                onClick={() =>
                  navigateTo({
                    url: `articleDetail/index?id=${id}`,
                    success(res) {
                      console.log(res);
                    },
                  })
                }
              />
            );
          })}
        </AtList>
      </View>
    );
  }
}
